<template>
    <div id="app">
        <el-card class="box">
            <span>登录</span>

            <div class="text item">
                <el-form :inline="true" v-model="user" class="demo-form-inline">
                    <el-form-item label="用户名">
                        <el-input v-model="loginForm.userName" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item label="密码">
                        <el-input v-model="loginForm.password"  type="password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <br>
                    <el-form-item>
                        <el-button type="primary" @click="submit">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </el-card>

    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "login",
        data(){
            return{
                loginForm:{
                    userName:"",
                    password:""
                }
            }
        },
        methods:{
            submit(){
                axios
                    .post('/*',{
                        params:{
                            loginForm:this.loginForm
                        }
                    })
                    .then(function (response) {
                        console.log(response);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

            }
        }
    }
</script>

<style scoped>
    .el-card__body {
        padding: 20px;
        background-color: greenyellow;
    }

    .el-button {
        width: 206px;

        margin-left: 38px;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box {
        width: 480px;
    }
</style>